<template>
	<div style="height: 100%;">

		<div style="margin-top: 10px;">
			<el-table :data="tableData.list" style="width: 100%" size="mini" v-cloak border>
				<el-table-column type="index" label="序号" width="50" align="center">
				</el-table-column>
				<el-table-column prop="batchNo" label="批次" width="150" align="center">
				</el-table-column>
				<el-table-column prop="isComplete" label="状态" width="150" align="center">
					<template scope="scope">
						<el-tag v-if="scope.row.isComplete" type="success" size="mini">已完成</el-tag>
						<el-tag v-else type="danger" size="mini">未完成</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="结果" prop="resultStr" width="150" align="center">
				</el-table-column>
				<el-table-column prop="planTime" label="计划时间" align="center">
				</el-table-column>
				<el-table-column prop="completeTime" label="监测时间" align="center">
				</el-table-column>
				<el-table-column prop="submitByName" label="经办人" align="center">
				</el-table-column>
				<el-table-column prop="file" label="报告" align="center">
					<template scope="scope">

						<el-button v-if="scope.row.file" icon="el-icon-download" type="success" size="mini">下载文件</el-button>
						<el-button v-else type="danger" @click="uploadFileFunc(scope.row)" icon="el-icon-upload2"
							size="mini">上传文件</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<el-dialog v-if="visible1" :visible.sync="visible1" width="530px" :title="'文件上传'" @close="closeDia" top="50px">
			<uploadWord ref="uploadWord" :selectItem="selectItem" @success="closeDia(),getTableData()" @cancle="closeDia"
				:optionType="optionType" type="water">
			</uploadWord>
		</el-dialog>

	</div>
</template>

<script>
	import uploadWord from '@/components/upload/uploadWord'
	import moment from 'moment'

	let that
	export default {
		props: ['outletId'],
		components: {
			uploadWord
		},
		data() {
			return {
				fileViewUrl: 'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID=',
				optionType: "add",
				selectItem: '',
				params: {
					ticketId: '',
					startTime: "",
					endTime: "",
					surveyMainId: '',
					completeTime: '',
					result: 'NORMAL',
					outletId: '',
				},
				visible1: false,
				dateValues: ["", ""],
				tableData: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this

			that.params.ticketId = that.$store.state.token
			that.params.outletId = that.outletId
			//that.params.surveyMainId = that.getQueryString("surveyMainId")
			that.getTableData()
		},
		methods: {

			downLoadWord(item) {
				window.open(that.fileViewUrl + item.fileId)
			},

			uploadFileFunc(item) {
				that.visible1 = true
				that.selectItem = item
			},

			closeDia() {
				that.visible1 = false
				if (that.$refs.uploadWord) that.$refs.uploadWord.removeFile()
			},

			search() {
				if (that.dateValues && that.dateValues.length > 0) {
					that.params.startTime = that.dateValues[0]
					that.params.endTime = that.dateValues[1]
				} else {
					that.params.startTime = ""
					that.params.endTime = ""
				}
				that.tableData.pageIndex = 1
				that.getTableData()
			},

			handleSizeChange: function(val) {
				that.tableData.pageIndex = 1;
				that.tableData.pageSize = val;
				that.getTableData();
			},

			handleCurrentChange: function(val) {
				that.tableData.pageIndex = val;
				that.getTableData();
			},


			//下载表格
			downLoadExcle() {
				let appPath = "https://www.weifeibangbang.com/"
				//let appPath = "http://localhost:8080/"
				let apiName = "sw/standBook/createProduceStandBookExcel"

				apiName = apiName + '?ticketId=' + that.params.ticketId + "&facilitatorId=" + that.params.facilitatorId
				if (that.params.startTime) apiName = apiName + '&startTime=' + that.params.startTime
				if (that.params.endTime) apiName = apiName + '&endTime=' + that.params.endTime
				window.open(appPath + apiName)
			},

			getTableData() {
				let apiName = "/outletDetail/getWaterOutletSurveyList"
				that.ajax({
					url: apiName + '?ticketId=' + that.params.ticketId,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							for (let item of result.data) {
								item.planTime = item.planTime.split(" ")[0]
								item.completeTime = item.completeTime ? item.completeTime.split(" ")[0] : ''
							}
							that.tableData.list = result.data;
						}
					},
				})
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selectedClass {
		color: #426ab3;
		font-weight: bold;
	}
</style>